<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.button{
			display: inline-flex;
			text-align: center;
			align-items:center;
			line-height: 32px;
		}
		.button span{
			display: inline-flex;
			height: 100%;
			margin: 0;
		}
		#draggableDiv{
		  top: 0;
		  left: 0;
		  cursor: move;
		  background-color: red;
		  width: 100px;
		  height: 100px;
		}
	</style>
	<body>
	
		
		<button class="button">
			<span>
				<svg width="24" height="24" viewBox="0 0 24 24" class="Zi Zi--EditSurround" fill="currentColor"><path d="M4.352 6.804A2.554 2.554 0 0 1 6.905 4.25h6.072a.875.875 0 0 0 0-1.75H6.905a4.304 4.304 0 0 0-4.303 4.304v10.142a4.304 4.304 0 0 0 4.303 4.304h10.143a4.304 4.304 0 0 0 4.304-4.304v-6.071a.875.875 0 0 0-1.75 0v6.071a2.554 2.554 0 0 1-2.554 2.554H6.905a2.554 2.554 0 0 1-2.553-2.554V6.804Z"></path><path d="M20.595 4.731a.875.875 0 1 0-1.237-1.237l-7.763 7.762a.875.875 0 1 0 1.238 1.238l7.762-7.763Z"></path></svg>
			</span>
			文字
		</button>
		
		
		<div id="draggableDiv">
			
			
		</div>
		
		<script>
			
			var draggableDiv = document.getElementById("draggableDiv"); // 获取需要拖动的元素
			//设置css样式，是贴在屏幕上
			draggableDiv.style.position="fixed";
			var isDragging = false; // 声明一个变量来跟踪是否正在拖动
			var offsetX, offsetY; // 保存鼠标点击位置与元素左上角的偏移量
			
			draggableDiv.addEventListener("mousedown", function(e) {
			  isDragging = true; // 设置拖动状态为true
			  offsetX = e.clientX - draggableDiv.offsetLeft; // 计算鼠标点击位置与元素左上角的水平偏移量
			  offsetY = e.clientY - draggableDiv.offsetTop; // 计算鼠标点击位置与元素左上角的垂直偏移量
			});
			
			document.addEventListener("mousemove", function(e) {
			  if (isDragging) { // 如果正在拖动
			    var x = e.clientX - offsetX; // 计算拖动的新水平位置
			    var y = e.clientY - offsetY; // 计算拖动的新垂直位置
			    
			    // 确保元素不会超出屏幕可见区域
			    var maxX = window.innerWidth - draggableDiv.offsetWidth; // 计算水平方向的最大可见范围
			    var maxY = window.innerHeight - draggableDiv.offsetHeight; // 计算垂直方向的最大可见范围
			    x = Math.max(0, Math.min(maxX, x)); // 限制水平位置在可见范围内
			    y = Math.max(0, Math.min(maxY, y)); // 限制垂直位置在可见范围内
			
			    draggableDiv.style.left = x + "px"; // 设置元素的新水平位置
			    draggableDiv.style.top = y + "px"; // 设置元素的新垂直位置
			  }
			});
			
			document.addEventListener("mouseup", function() {
			  isDragging = false; // 设置拖动状态为false，表示拖动结束
			});
		</script>
	</body>
</html>